<template>
    <div ref="myChart" style="width: 100%;height:calc(100%-50px);"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'MyChart',
    mounted() {
        // this.initChart();
    },
    props:{
        dataSource:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            icon: require('@/assets/datascreen/newScreen/icon1.png'),
            lengded1:require('@/assets/datascreen/newScreen/lenged1.png'),
            lengded2:require('@/assets/datascreen/newScreen/lenged2.png'),
            lengded3:require('@/assets/datascreen/newScreen/lenged3.png'),
        }
    },
    watch:{
        dataSource:{
            handler(newData,oldData){
                this.initChart(newData)
        }
        }
    },
    methods: {
        initChart(newData) {

            var myChart = echarts.init(this.$refs.myChart);
            var data = {
                dataAge:newData?newData:[
                    { value: 0, 
                    name: '正常房屋', 
                    },
                    { value: 0, 
                    name: '一般隐患', 
                    },
                    { value: 0, 
                    name: '严重隐患', 
                    }
                ]
            };
            var option = {
                backgroundColor: 'rgba(0,0,0,0)',
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '5%',
                    bottom: '15%',
                },
                legend: {
                    orient: 'vertical', // 设置图例为竖向排列
                    right: '4%', // 图例距离容器右侧的距离
                    top: 'middle', // 图例垂直居中
                    itemGap: 20 ,
                    // type: 'plain',
                    data:data.dataAge.map((item,index)=>{
                        console.log(item,'item')
                        return {
                            name:item.name,
                            icon: `image://${this['lengded'+(index+1)]}`,
                            
                        }
                    }),
                    formatter: function (name) {
                                const data = myChart.getOption().series[0].data;
                                const target = data.find(item => item.name === name);
                                const index = data.findIndex(item => item.name === name);
                                const colors = ['rgba(0,255,255,0.1)', 'rgba(255,153,0,0.1)', 'rgba(124,255,178,0.1)'];
                                return `{back${index}|    ${name}  ${target.value}%}`;
                            },
                   
                    textStyle: {
                        rich: {
                            back0: {

                                padding: [8, 15, 8, 2],
                                borderRadius: 20,
                                color: '#fff',
                                fontSize: 14,
                                align: 'left'
                            },
                            back1: {
                                padding: [8, 15, 8, 2],
                                borderRadius: 20,
                                color: '#fff',
                                fontSize: 14,
                                align: 'left'
                            },
                            back2: {
                                padding: [8, 15, 8, 2],
                                borderRadius: 20,
                                color: '#fff',
                                fontSize: 14,
                                align: 'left'
                            }
                        }
                    },
                },
                graphic: {
                    elements: [
                        {
                            type: 'image',
                            style: {
                                image: this.icon, // 这里替换为你的图片URL
                                width: 40, // 图片的宽度
                                height: 40 // 图片的高度
                            },
                            left: '30%', // 图片的水平位置
                            top: 'center' // 图片的垂直位置
                        }]
                },
                color: ['#83F3FE ', '#5398F1', '#5398F1', '#5398F1', 'rgba(83, 152, 241, 0.20)', 'rgba(83, 152, 241, 0.60)', 'rgba(83, 152, 241, 0.60)'],
                series: [
                    {
                        color: ['#83F3FE ', '#F7A03E', '#ca1e21', 'rgba(83, 152, 241, 0.20)', '#48B188', '#5957C2'],
                        type: 'pie',
                        radius: ['50%', '64%'],
                        center: ['35%', '50%'],
                        labelLine: {
                            normal: {
                                length: 25,
                                length2: 120,
                                lineStyle: {
                                    type: 'solid'
                                }
                            }
                        },
                        label: {
                            show: false
                            // normal: {
                            //     formatter: (params) => {
                            //         console.log(params);
                            //         return '{b| ' + params.name + '} ' + '{c|' + params.percent.toFixed(0) + '%}'
                            //     },
                            //     borderWidth: 0,
                            //     borderRadius: 4,
                            //     padding: [0, -86],
                            //     height: 70,
                            //     fontSize: 13,
                            //     align: 'center',
                            //     color: 'rgba(0,0,0,0)',
                            //     rich: {
                            //         b: {
                            //             fontSize: 12,
                            //             lineHeight: 20,
                            //             color: 'rgba(0,0,0,0)',
                            //             padding: [0, 0, 5, 0]
                            //         },
                            //         c: {
                            //             fontSize: 20,
                            //             lineHeight: 20,
                            //             color: 'rgba(0,0,0,0)'
                            //         }
                            //     }
                            // }
                        },
                        data: data.dataAge,
                        itemStyle: {
                            // 设置边框宽度，控制间隔大小
                            borderWidth: 5,
                            // 设置边框颜色为背景色，营造间隔效果
                            borderColor: '#013CA3'
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['70%', '74%'],
                        center: ['35%', '50%'],

                        data: [100],
                        label: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['24%', '25%'],
                        center: ['35%', '50%'],

                        data: [100],
                        label: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['34%', '35%'],
                        center: ['35%', '50%'],

                        data: [100],
                        label: {
                            show: false
                        },
                        itemStyle: {
                            color: 'rgba(83, 152, 241, 0.30)'
                        }
                    }]

                //rgba(83, 152, 241, 0.60)
            };
            myChart.setOption(option);
        }
    }
};
</script>